<template>
	<view>
		<view class="car-img">
			<view class="picture-list">
				<!-- 图片 -->
				<view class="picture-list-info">
					<image class="picture-list-img" :src="image" mode="widthFix"/>
					<!-- 图片下方的文字说明 -->
				</view>
			</view>
		</view>
		<view class="ly-padding">
			<view class="text-center"><button class="car-btn cu-btn round line-green lg" @tap="handleShowTree">点击选择车型</button></view>		
		</view>
		<view class="selectedText" style="margin-top:50upx;">{{brand}}</view>
		<view class="selectedText" v-for="(item, i) in selectedData">{{item}}</view>
		<u-popup v-model="showTree" mode="right" border-radius="14" width="50%">
			<view style="height: 80upx; text-align:center; padding-top:20upx;">请选择</view>
			<view class="toSelectText" v-for="(item, i) in selList" @tap="tapItem(item)">{{item}}</view>
		</u-popup>
	</view>
</template>

<script>
	import LyTreeDrawer from '../component/ly-tree-drawer.vue'
	export default {
		components: {
			LyTreeDrawer
		},
		data() {
			return {
				brand: '',
				image: '',
				tab: 0,//0漆面膜 1内饰 2改色 3窗膜
				showTree: false,
				selectedData:[],
				selList: [],//当前可供选择的元素
				modelList:[
					{
						model:'price',
						modelId:16,
						channel:54,						
					},
					// {
					// 	model:'inprice',
					// 	modelId:19,
					// 	channel:55,						
					// },
					{
						model:'cprice',
						modelId:20,
						channel:56,	
					},
				],
			}
		},
		onLoad(option) {
			this.brand = option.brand;
			this.image = option.img;
			this.tab = parseInt(option.tab);
			this.handleShowTree();
		},
		onReady() {
			
		},
		methods: {
			async handleShowTree() {
				this.showTree = true;
				this.selectedData = [];
				//获取该品牌下车型清单
				let res = await this.$api.getList({
					model:'cartype',
					field:'car_model',
					where:"car_brand = '" + this.brand + "'"
				});
				if(res.code){
					this.selList = res.data;
				}
			},
			
			async tapItem(item){
				//点击了列表项
				this.selectedData.push(item);
				if(this.selectedData.length == 1){
					//选产品
					let res = await this.$api.getList({
						model: this.modelList[this.tab].model,
						field:'product_type',
						where:'1=1'
					});
					if(res.code){
						this.selList = res.data;
					}
				}
				else if(this.selectedData.length == 2){
					this.showTree = false;
					//去看报价了
					uni.navigateTo({
						url:'/pages/car/caritem?model=' + this.modelList[this.tab].modelId + '&channel=' + this.modelList[this.tab].channel + '&brand=' + this.brand + '&carmodel=' + this.selectedData[0] + '&prod=' + this.selectedData[1]
					});
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.picture-list-info {
		position: relative;
		text-align: center;
	}

	.picture-list-img {
		margin-top: 50upx;
	}

	.picture-list-desc {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		padding: 20upx;
	}

	.car-btn {
		width: 650upx;
		margin-top: 100upx;
	}	
	
	.selectedText{
		font-size: 40upx;
		margin-left: 60upx;
		border-bottom: 2upx gray solid;
		width: 40%;
		text-align: center;
		padding-bottom: 20upx;
		margin-top: 20upx;
	}
	
	.toSelectText{
		font-size: 34upx;
		margin-left: 5%;
		border-bottom: 2upx gray solid;
		width: 90%;
		text-align: center;
		padding-bottom: 10upx;
		margin-top: 20upx;
	}
	
	.sideBar{
		width: 60%;
		height: 100%;
		position: fixed;
		right: 0;
		top: 0;
		background-color: #FFFFFFBB;
	}
</style>
